<template>
    <div class="home">
        <el-button @click="toHomeFS('/Tool')">TOOL</el-button>
        <el-button @click="toHomeFS('/UserSetting')">UserSetting</el-button>
    </div>
</template>

<script>

export default {
    name: 'Home',
    components: {},
    data() {
        return {
            isDarkMode: 'Toggle Dark Mode',
        };
    },
    mounted() {},
    methods: {
        toHomeFS(urlName) {
            this.$router.push({
                path: urlName,
                params: {
                    id: 222,
                },
            });
        },
    },
};
</script>

<style lang="scss" scoped>
@media (prefers-color-scheme: dark) {
    .springItemMask {
        border: 2px solid #ffffff;
        box-shadow: 0px 51px 69px rgba(23, 18, 43, 0.585739);
    }
}
@media (prefers-color-scheme: light) {
    .springItemMask {
        border: 2px solid #26293f;
        box-shadow: 50px 38px 102.371px rgba(120, 118, 148, 0.14);
    }
}

.home {
    width: 100%;
    height: 100%;
    position: relative;
    #MindMapBox {
        width: 100%;
        height: 100%;
    }
    .MindMapBoxMask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .MindMapBoxSvgMask {
            min-width: 100%;
            min-height: 100%;
            position: absolute;
            top: 0;
            left: 0;

            .springItemMask {
                position: absolute;
                box-sizing: border-box;
                top: 0;
                left: 0;
                border-radius: 8px;
                cursor: pointer;
            }
        }
    }
}
</style>
